@CHARSET "UTF-8";

/* 
 *  全局样式
 *  ---------------------------------------
 *  作者: haibao(http://smwell.sinaapp.com/)
 *  时间: 2015-1-6
 *  企鹅：964279742
 *  创意源于生活，代码如诗从你我开始
 *  OOCSS虽好，需培养，需规范，需慢慢品尝
 */


/*slider*/

#slider-box {
	position: relative;
	width: 100%;
	overflow: hidden;
	box-shadow: 0 -1px 4px rgba(0,0,0,0.25);
}

#slider {
	height: 100%;
	overflow: hidden;
	*zoom: 1;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
}

#slider li {
	width: 100%;
	height: 100%;
	float: left;
	display: none;
}

#slider li.active {
	display: block;
	-webkit-animation-name: lightSpeedIn;
	animation-name: lightSpeedIn;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

#slider li img {
	width: 100%;
	display: block;
}

#arrow {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

#arrow li {
	width: 10px;
	height: 4px;
	float: left;
	display: inline-block;
	margin: 0 3px;
	background-color: #d0d2d3;
	border-radius: 3px;
}

#arrow li.active {
	background-color: #67b0d6;
}

@-webkit-keyframes lightSpeedIn {
	0% {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
		opacity: 0;
	}
	60% {
		-webkit-transform: translateX(-20%);
		-ms-transform: translateX(-20%);
		transform: translateX(-20%);
		opacity: 1;
	}
	80% {
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 1;
	}
}

@keyframes lightSpeedIn {
	0% {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
		opacity: 0;
	}
	60% {
		-webkit-transform: translateX(-20%);
		-ms-transform: translateX(-20%);
		transform: translateX(-20%);
		opacity: 1;
	}
	80% {
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 1;
	}
}